<template>
<!-- 主容器 - 填充整个页面 -->
<div class="w-full min-h-screen" style="background-color: var(--content-bg-color)">
  <!-- 内容区域 -->
  <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
      
      <!-- 左侧主内容区域 -->
      <div class="lg:col-span-3">
        <div class="article-card border rounded-xl shadow-sm p-6 transition-all duration-300">
                    <!-- 面包屑 -->
                    <nav class="flex mb-6" aria-label="Breadcrumb">
                        <ol class="inline-flex items-center space-x-2 md:space-x-4">
                            <li class="inline-flex items-center">
                                <a @click="router.push('/')"
                                    class="cursor-pointer inline-flex items-center text-sm font-medium text-secondary hover:text-accent transition-colors duration-200">
                                    <svg class="w-4 h-4 mr-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                                        fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1h2a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1h-6.5" />
                                    </svg>
                                    首页
                                </a>
                            </li>
                            <li aria-current="page">
                                <div class="flex items-center">
                                    <svg class="w-5 h-5 text-secondary mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7"/>
                                    </svg>
                                    <span class="text-sm font-medium text-primary">正文</span>
                                </div>
                            </li>
                        </ol>
                    </nav>


                    <!-- 文章主体 -->
                    <article>
                        <h1 class="article-title text-4xl md:text-5xl font-bold mb-6 leading-tight">{{ article.title }}</h1>
                        <div class="flex flex-wrap items-center text-sm space-x-4 mb-8 article-meta">
                            <div class="flex items-center">
                                <svg class="w-4 h-4 mr-2 text-secondary" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M5 1v3m5-3v3m5-3v3M1 7h18M5 11h10M2 3h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z" />
                                </svg>
                                <span>发表于 {{ article.updateTime }}</span>
                            </div>

                            <div class="flex items-center">
                                <svg class="w-4 h-4 mr-2 text-secondary" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M1 5v11a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H1Zm0 0V2a1 1 0 0 1 1-1h5.443a1 1 0 0 1 .8.4l2.7 3.6H1Z" />
                                </svg>
                                <span>分类于</span>
                                <a @click="goCatagoryArticleListPage(article.categoryId, article.categoryName)"
                                    class="ml-1 text-accent hover:underline transition-colors duration-200">{{ article.categoryName }}</a>
                            </div>

                            <div class="flex items-center">
                                <svg class="w-4 h-4 mr-2 text-secondary" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 14">
                                    <g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
                                        <path d="M10 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
                                        <path d="M10 13c4.97 0 9-2.686 9-6s-4.03-6-9-6-9 2.686-9 6 4.03 6 9 6Z" />
                                    </g>
                                </svg>
                                <span>阅读量 {{ article.readNum }}</span>
                            </div>
                        </div>

                        <div class="article-content prose prose-lg max-w-none mb-10" v-viewer v-html="article.content" v-highlight>
                        </div>
                        
                        <!-- 标签 -->
                        <div class="mt-8 mb-6">
                            <div class="flex flex-wrap gap-2">
                                <div @click="goTagArticleListPage(item.id, item.name)" v-for="(item, index) in article.tags"
                                    :key="index"
                                    class="tag-item inline-block text-sm font-medium px-3 py-1 rounded-full cursor-pointer transition-colors duration-200">
                                    # {{ item.name }}
                                </div>
                            </div>
                        </div>
                    </article>
                    <!-- 上下篇 -->
                    <div class="article-footer mt-8 pt-6 border-t border-card-border flex justify-between">
                        <div class="prev-article">
                            <a v-if="article.preArticleId" @click="goArticleDetail(article.preArticleId)"
                               class="group flex flex-col cursor-pointer transition-all duration-300 hover:translate-x-[-4px]">
                                <span class="text-xs text-secondary mb-1 flex items-center">
                                    <svg class="w-4 h-4 mr-1 group-hover:text-accent transition-colors duration-200" aria-hidden="true"
                                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                            stroke-width="2" d="M5 12h14M5 12l4-4m-4 4l4 4" />
                                    </svg>
                                    上一篇
                                </span>
                                <span class="text-primary group-hover:text-accent transition-colors duration-200 line-clamp-1">
                                    {{ article.preArticleTitle }}
                                </span>
                            </a>
                        </div>
                        <div class="next-article">
                            <a v-if="article.nextArticleId" @click="goArticleDetail(article.nextArticleId)"
                               class="group flex flex-col items-end cursor-pointer transition-all duration-300 hover:translate-x-[4px]">
                                <span class="text-xs text-secondary mb-1 flex items-center">
                                    下一篇
                                    <svg class="w-4 h-4 ml-1 group-hover:text-accent transition-colors duration-200" aria-hidden="true"
                                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                            stroke-width="2" d="M19 12H5m14 0l-4 4m4-4l-4-4" />
                                    </svg>
                                </span>
                                <span class="text-primary group-hover:text-accent transition-colors duration-200 line-clamp-1">
                                    {{ article.nextArticleTitle }}
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
  
        </div>
    
        <!-- 右边栏 -->
        <div class="lg:col-span-1">
            <div class="sticky top-21">
                    <UserInfoCard></UserInfoCard>

                    <!-- 文章分类 -->
                    <div
                        class="mb-3 w-full font-medium p-5 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
                        <h2 class="mb-2 font-bold text-gray-900 uppercase dark:text-white">分类</h2>
                        <div
                            class="text-sm font-medium text-gray-900 bg-white rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                            <a @click="goCatagoryArticleListPage(item.id, item.name)" v-for="(item, index) in categories"
                                :key="index"
                                class="flex items-end block w-full px-4 py-2 rounded-lg cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">
                                <svg class="w-4 h-4 mr-2 mb-2px text-gray-800 inline dark:text-white" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 18">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="0.9"
                                        d="M2.539 17h12.476l4-9H5m-2.461 9a1 1 0 0 1-.914-1.406L5 8m-2.461 9H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.443a1 1 0 0 1 .8.4l2.7 3.6H16a1 1 0 0 1 1 1v2H5" />
                                </svg>
                                {{ item.name }}
                            </a>
                        </div>
                    </div>

                    <!-- 文章标签 -->
                    <div
                        class="mb-3 w-full font-medium p-5 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
                        <h2 class="mb-2 font-bold text-gray-900 uppercase dark:text-white">标签</h2>
                        <div @click="goTagArticleListPage(item.id, item.name)" v-for="(item, index) in tags" :key="index"
                            class="inline-block bg-green-100 text-green-800 text-xs font-medium mr-2 mb-1 px-2.5 py-0.5 rounded hover:bg-green-200 hover:text-green-900 dark:hover:bg-green-800 dark:hover:text-green-300 dark:bg-green-900 dark:text-green-300">
                            {{ item.name }}
                        </div>
                    </div>
                </div>
        </div>
      </div>
    </div>
    </template>
    
    
    <script setup>
import UserInfoCard from '@/layouts/client/modules/UserInfoCard.vue';
import { getArticleDetail } from '@/service/api/frontend/article';
import { getCategories } from '@/service/api/frontend/category';
import { getTags } from '@/service/api/frontend/tag';
import { useRoute, useRouter } from 'vue-router';
import { reactive, ref } from 'vue';
    
    
    const router = useRouter()
    const route = useRoute()
    const article = reactive({
        title: '',
        content: '',
        updateTime: '',
        readNum: 0,
        categoryId: null,
        categoryName: '',
        preArticleId: null,
        preArticleTitle: '',
        nextArticleId: null,
        nextArticleTitle: '',
        tags: [],
    })
    
    function queryArticleDetail(articleId) {
        console.log('调用获取详情接口...' + route.query.articleId)
        getArticleDetail(articleId).then((e) => {
            article.title = e.data.title
            article.content = e.data.content
            article.updateTime = e.data.updateTime
            article.categoryId = e.data.categoryId
            article.categoryName = e.data.categoryName
            article.readNum = e.data.readNum
            article.tags = e.data.tags
            if (e.data.preArticle) {
                console.log('上一篇...')
                console.log(e.data.preArticle)
                article.preArticleId = e.data.preArticle.id
                article.preArticleTitle = e.data.preArticle.title
            } else {
                article.preArticleId = null
            }
    
            if (e.data.nextArticle) {
                article.nextArticleId = e.data.nextArticle.id
                article.nextArticleTitle = e.data.nextArticle.title
            } else {
                article.nextArticleId = null
            }
        })
    }
    queryArticleDetail(route.query.articleId);
    
    const goArticleDetail = (articleId) => {
        console.log('跳转详情页' + articleId)
        router.push({ path: '/client/home/article-detail', query: { articleId: articleId } })
        queryArticleDetail(articleId)
    }
    
    
    // 获取分类
    const categories = ref([])
    getCategories().then((e) => {
        console.log('获取分类数据')
        console.log(e)
        categories.value = e.data
    })
    
    
    // 获取标签
    const tags = ref([])
    getTags().then((e) => {
        console.log('获取标签数据')
        console.log(e)
        tags.value = e.data
    })
    
    const goCatagoryArticleListPage = (id, name) => {
        router.push({ path: '/client/category/category-article', query: { id: id, name: name } })
    }
    
    const goTagArticleListPage = (id, name) => {
        router.push({ path: '/client/tags/tag-article', query: { id: id, name: name } })
    }
    
    </script>
    
    
    
    
    <style lang="scss" scoped>
:root {
    --article-bg: #ffffff;
    --article-card-bg: #ffffff;
    --article-card-border: #e5e7eb;
    --article-card-shadow: rgba(0, 0, 0, 0.05);
    --article-text-primary: #1f2937;
    --article-text-secondary: #6b7280;
    --article-text-accent: #3b82f6;
    --article-tag-bg: #f3f4f6;
    --article-tag-text: #4b5563;
    --article-tag-hover-bg: #e5e7eb;
    --article-tag-hover-text: #1f2937;
    --article-border: #e5e7eb;
}

.dark {
    --article-bg: #111827;
    --article-card-bg: #1f2937;
    --article-card-border: #374151;
    --article-card-shadow: rgba(0, 0, 0, 0.2);
    --article-text-primary: #f9fafb;
    --article-text-secondary: #9ca3af;
    --article-text-accent: #60a5fa;
    --article-tag-bg: #374151;
    --article-tag-text: #d1d5db;
    --article-tag-hover-bg: #4b5563;
    --article-tag-hover-text: #f9fafb;
    --article-border: #374151;
}

.article-detail-container {
    width: 100%;
    min-height: 100%;
    background-color: var(--article-bg);
    overflow-y: auto;
    padding: 0;

    .article-detail-content {
        max-width: 1200px;
        margin: 0 auto;
        padding: 30px 20px 50px;

        .article-card {
            background-color: var(--article-card-bg);
            border: 1px solid var(--article-card-border);
            border-radius: 12px;
            box-shadow: 0 4px 6px var(--article-card-shadow);
            padding: 30px;
            margin-bottom: 30px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;

            &:hover {
                transform: translateY(-2px);
                box-shadow: 0 10px 15px var(--article-card-shadow);
            }
        }

        .article-title {
            font-size: 28px;
            font-weight: 700;
            color: var(--article-text-primary);
            margin-bottom: 16px;
            line-height: 1.3;
        }

        .article-meta {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            margin-bottom: 24px;
            font-size: 14px;
            color: var(--article-text-secondary);

            .meta-item {
                margin-right: 20px;
                margin-bottom: 8px;
                display: flex;
                align-items: center;

                .icon {
                    margin-right: 6px;
                }
            }
        }

        .article-content {
            line-height: 1.8;
            font-size: 16px;
            color: var(--article-text-primary);

            &.prose {
                color: var(--article-text-primary);

                h1, h2, h3, h4, h5, h6 {
                    color: var(--article-text-primary);
                    margin-top: 2em;
                    margin-bottom: 1em;
                    font-weight: 600;
                }

                h1 {
                    font-size: 2em;
                    border-bottom: 1px solid var(--article-border);
                    padding-bottom: 0.3em;
                }

                h2 {
                    font-size: 1.5em;
                    border-bottom: 1px solid var(--article-border);
                    padding-bottom: 0.3em;
                }

                a {
                    color: var(--article-text-accent);
                    text-decoration: none;
                    transition: color 0.2s ease;

                    &:hover {
                        text-decoration: underline;
                    }
                }

                blockquote {
                    border-left: 4px solid var(--article-text-accent);
                    padding-left: 1em;
                    color: var(--article-text-secondary);
                    font-style: italic;
                }

                code {
                    background-color: var(--article-tag-bg);
                    padding: 0.2em 0.4em;
                    border-radius: 3px;
                    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
                }

                pre {
                    background-color: var(--article-tag-bg);
                    border-radius: 6px;
                    padding: 1em;
                    overflow-x: auto;

                    code {
                        background-color: transparent;
                        padding: 0;
                    }
                }

                img {
                    border-radius: 8px;
                    max-width: 100%;
                    height: auto;
                    margin: 1.5em 0;
                    box-shadow: 0 4px 8px var(--article-card-shadow);
                }

                table {
                    border-collapse: collapse;
                    width: 100%;
                    margin: 1.5em 0;

                    th, td {
                        border: 1px solid var(--article-border);
                        padding: 0.75em;
                    }

                    th {
                        background-color: var(--article-tag-bg);
                    }

                    tr:nth-child(even) {
                        background-color: var(--article-tag-bg);
                    }
                }
            }
        }

        .tag-item {
            background-color: var(--article-tag-bg);
            color: var(--article-tag-text);
            border-radius: 9999px;
            transition: all 0.2s ease;

            &:hover {
                background-color: var(--article-tag-hover-bg);
                color: var(--article-tag-hover-text);
                transform: translateY(-2px);
            }
        }

        .article-footer {
            border-color: var(--article-border);

            a {
                max-width: 300px;
                overflow: hidden;
            }

            .text-primary {
                color: var(--article-text-primary);
            }

            .text-secondary {
                color: var(--article-text-secondary);
            }

            .text-accent {
                color: var(--article-text-accent);
            }
        }
    }
}
</style>